import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import { List, Page } from 'components'
import queryString from 'query-string'
import { ListMenuType } from 'utils/enums'
import { adminCompanyAccoutType } from 'utils/seletLocalData'
import Modal from '../Modal'
import Filter from '../Filter'

const CustomerSurplusDetail = ({ location, dispatch, customerSurplusDetail, loading }) => {
  location.query = queryString.parse(location.search)
  const { list, currentItem, modalVisible, pagination, modalType, selectedRowKeys, addressType, currenciesData, parentId } = customerSurplusDetail
  const { pageSize } = pagination
  const modalProps = {
    item: modalType === 'create' ? {} : currentItem,
    visible: modalVisible,
    maskClosable: false,
    width: 800,
    optionData: { currenciesData },
    confirmLoading: loading.effects['customerSurplusDetail/update'],
    title: 'Update',
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      dispatch({
        type: `customerSurplusDetail/${modalType}`,
        payload: {
          data,
        },
      })
    },
    onCancel () {
      dispatch({
        type: 'customerSurplusDetail/hideModal',
      })
    },
  }
  let tempList = list.concat([])
  if (tempList) {
    for (let i = 0; i < tempList.length; i++) {
      tempList[i].name = list[i].firstName + list[i].middleName + list[i].lastName
    }
  }
  const listProps = {
    dataSource: tempList,
    menuType: ListMenuType.MENU_UPDATE + ListMenuType.MENU_DELETE,
    loading: loading.effects['customerSurplusDetail/list'],
    location,
    columnsData: [
      {
        title: 'Index',
        key: 'index',
        render: (text, record, index) => {
          return <span>{index + 1}</span>
        },
      },
      {
        title: 'CustomerNumber',
        dataIndex: 'customerNumber',
        key: 'customerNumber',
      },
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'CurrencyCode',
        dataIndex: 'currencyCode',
        key: 'currencyCode',
      },
      {
        title: 'Type',
        dataIndex: 'type',
        key: 'type',
        render: (text, record) => {
          let res = ''
          adminCompanyAccoutType.forEach((e) => {
            if (e.key === record.type) {
              res = e.value
            }
          })
          return res
        },
      },
      {
        title: 'Amount',
        dataIndex: 'amount',
        key: 'amount',
      },
    ],
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        search: queryString.stringify({
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        }),
      }))
    },
    onDeleteItem (id) {
      dispatch({
        type: 'customerSurplusDetail/delete',
        payload: { id },
      })
    },
    onEditItem (item) {
      dispatch({
        type: 'customerSurplusDetail/showModal',
        payload: {
          modalType: 'update',
          currentItem: item,
          type: addressType,
        },
      })
    },
  }
  const filterProps = {
    filter: {
      ...location.query,
    },
    currenciesData,
    onFilterChange (value) {
      dispatch(routerRedux.push({
        pathname: location.pathname,
        search: queryString.stringify({
          ...value,
          page: 1,
          pageSize,
        }),
        // query: {
        //   ...value,
        //   page: 1,
        //   pageSize,
        // },

      }))
    },
  }
  return (
    <Page inner>
      <Filter {...filterProps} />
      <List {...listProps} />
      {modalVisible && <Modal {...modalProps} />}
    </Page>
  )
}

CustomerSurplusDetail.propTypes = {
  adminCompanyAccountData: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
  customerSurplusDetail: PropTypes.object,
}


export default connect(({ customerSurplusDetail, loading }) => ({ customerSurplusDetail, loading }))(CustomerSurplusDetail)
